<template>
  <div>
    <div class="see-all-container">
      <div class="header-title">
        <span @click="$router.push('/panel')"><img src="~images/default/call_back_left.png" alt=""></span>
        <span>11/13 晚归/异常 学生</span>
      </div>
      <!-- 搜索框 -->
      <van-search
        class="search-input"
        v-model="value"
        placeholder="综合搜索（姓名/学号/学院/班）"
        @search="onSearch"
      >
      </van-search>
      <div class="search-icon" @click="onSearch"><img src="~images/default/input_search.png" alt=""></div>
      <div class="screen-icon"><img src="~images/default/funnel.png" alt=""></div>
      <div class="screen-btn" @click="$router.push('/panelSearchForm')">筛选</div>
      <!-- 筛选条件标签 -->
      <div class="screen-cond-item">
        <div v-for="(item, index) in screenTagList" :key="index">
          <van-tag
            v-if="item.show"
            closeable
            size="medium"
            type="primary"
            @close="close(index)"
          >
            {{item.value}}
          </van-tag>
        </div>
      </div>
    </div>
    <!-- 内容 -->
    <div class="screen-content-container">
      <div class="content-title">
        共 <span class="screen-total">{{resultTotal}}</span>条记录符合条件
      </div>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
        <div v-for="(item, index) in tableData" :key="index">
          <StuMain
            :info="item"
          />
        </div>
        </van-list>
         <!-- 无数据 -->
        <div class="no-data-bg" v-if="tableData.length < 1">
          <van-empty description="暂无数据" />
        </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'panelDetail',
  data() {
    return {
      screenTagList: [
        {
          value: '第一学生公寓',
          show: true,
        },
        {
          value: '当日 23:00 以后',
          show: true,
        },
        {
          value: '19级 /包装学院 / 包装工程 / 19策划2班',
          show: true,
        },
      ],
      value: '',
      loading: false,
      finished: false,
      resultTotal: '',
      pageNumber: 0,
      tableData: [],
      queryForm: {
        year_num: '2021',
        month_num: '01',
        day_num: '06',
      },
    }
  },
  created() {
    /* 筛选跳转回来 */
    this.$route.params.screen
  },
  computed: {
    getNowDate() {
      let date = new Date()
      let y = date.getFullYear()
      let m = (date.getMonth() + 1).toString().padStart(2, '0')
      let d = date.getDate().toString().padStart(2, '0')
      let H = date.getHours()
      return y + '-' + m + '-' + d + ' ' + H + ':' + '00'
    },
  },
  methods: {
    onLoad() {
      this.loading = true
      this.pageNumber= this.pageNumber + 1
      this.queryForm.page = this.pageNumber
      this._requestData()
    },
    onSearch() {
      /* 综合搜索 */
      this.tableData=[]
      this.queryForm={},
      this.queryForm.multi_field = this.value
      this._requestData()
    },
    getLate() {
      /* 获取晚归列表 */
      this.$api.panel.getLateList( this.queryForm ).then(res=> {
        this.resultTotal =res.data.total
        this.tableData.push(...res.data.data)
        this.loading = false
      })
      this._onLoadFinished()
    },
    getInAndOut() {
      /* 获取出入列表 */
      this.$api.panel.getInAndOut( this.queryForm ).then(res=> {
        this.resultTotal =res.data.total
        this.tableData.push(...res.data.data)
        this.loading = false
      })
      this._onLoadFinished()
    },
    getTemperatureList() {
      /* 获取体温列表 */
      this.$api.panel.getTemperatureList( this.queryForm ).then(res=> {
        this.resultTotal =res.data.total
        this.tableData.push(...res.data.data)
        this.loading = false
      })
      this._onLoadFinished()
    },
    _requestData() {
      /* 请求数据 */
      const page = sessionStorage.getItem('panel-search-state')
      switch (page) {
        case 'late':
          this.getLate()
          break
        case 'access':
          this.getInAndOut()
          break
        case 'temper':
          this.getTemperatureList()
          break
      }
    },
    _onLoadFinished() {
      /* 加载结束 */
      if (this.resultTotal=== this.tableData.length) this.finished = true
    },
    close(index) {
      this.$set(this.screenTagList[index], 'show', false)
    },
  },
}
</script>
<style lang="scss" scoped>
.see-all-container {
  position: relative;
  width: 375px;
  height: 215px;
  background: url("~images/theme/header_bg.png") no-repeat;
  background-size: 100% 100%;
  .header-title {
    display: flex;
    height: 16px;
    span {
      &:first-child {
        position: absolute;
        width: 24px;
        height: 24px;
        display: grid;
        place-items: center;
        top: 18px;
        left: 19px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      &:last-child {
        position: absolute;
        top: 22px;
        left: 112px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
      }
    }
  }
  .search-input {
    position: absolute;
    top: 58px;
    left: 20px;
  }
  .search-icon {
    display: grid;
    place-items: center;
    position: absolute;
    top: 65px;
    right: 99px;
    width: 22px;
    height: 22px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .screen-icon {
    display: grid;
    place-items: center;
    position: absolute;
    top: 70px;
    right: 63px;
    width: 14px;
    height: 14px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .screen-btn {
    position: absolute;
    top: 69px;
    right: 24px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    padding: 0 5px 5px;
    color: #ffffff;
  }
  .van-search {
    width: 266px;
    height: 36px;
    border-radius: 5px;
    background-color: transparent;
    padding: 0;
  }
  .van-field__control {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #bac2d6;
  }
  .van-search__content {
    padding-left: 14px;
    padding-right: 49px;
  }
  &::v-deep .van-icon-search {
    &:before {
      display: none;
    }
  }
  /* 筛选条件 */
  .screen-cond-item {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    position: absolute;
    top: 120px;
    left: 20px;
    .van-tag {
      height: 30px;
      font-size: 14px;
      color: #DBE1ED;
      font-weight: 500;
      font-family: PingFangSC-Medium, PingFang SC;
      padding: 8px 12px;
      margin-right: 10px;
      // margin-bottom: 10px;
      background: rgba($color: #FFFFFF, $alpha: .2);
      border-radius: 5px;
    }
    .van-icon-cross {
      &::before {
        content: '\F034';
        margin-left: 8px;
        color: #BAC2D6;
      }
    }
    ::v-deep .van-picker-column__item {
      color: #002170;
    }
  }
}
.screen-content-container {
  margin: 15px 15px 0;
  .content-title {
    display: flex;
    align-items: center;
    width: 345px;
    height: 43px;
    background: #2a529f;
    border-radius: 5px 5px 0 0;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    padding-left: 24px;
    .screen-total {
      font-size: 24px;
      font-family: JCHEadA;
      color: #ffffff;
      padding: 4px;
    }
  }
}
</style>